<template>
<el-form 
        :model="form" 
        label-width="auto" 
        style="max-width: 600px"
>
        <el-form-item label="请输入实体类名称" label-position="top" >
            <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="请输入实体类属性" label-position="top">
            <el-input 
                v-model="form.attributes"
                :rows="3"
                type="textarea"
            />
        </el-form-item>
        <el-form-item label="属性默认值" label-position="left">
            <el-switch v-model="form.delivery"  style="--el-switch-on-color: #409EFF; --el-switch-off-color: #F56C6C;margin-right: 10%;"/>
            <el-button  :disabled="!form.delivery" type="danger" size="small" @click="dialogVisible = true">编辑默认值</el-button>
        </el-form-item>


        <el-dialog
            v-model="dialogVisible"
            title="属性默认值"
            width="500"  
        >
            <span>测试</span>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    确定
                </el-button>
                </div>
                </template>
        </el-dialog>

        <el-form-item label="主键列名" label-position="left">
            <el-input v-model="form.PrimaryName"/>
        </el-form-item>
        <el-form-item label="是否开启驼峰命名" label-position="top">
            <el-select v-model="form.HumpName" >
                <el-option label="启用" value="启用"/>
                <el-option label="禁用" value="禁用"/>
            </el-select>
            </el-form-item>
            <p>
            </p>
            <el-form-item>
                <el-button type="primary" @click="generation">AI一键生成sql语句</el-button>
            </el-form-item>
            
</el-form>
</template>

<script setup>
import { reactive,ref} from 'vue'
const form = reactive({
    name: '',
    attributes:[],
    HumpName: '禁用',
    PrimaryName:'ID',
    delivery: false,
})

const dialogVisible = ref(false)
const generation=()=>{
    console.log(form)
}
const onSubmit = () => {
    console.log('submit!')
}
</script>

<style scoped>
    .el-form-item{
        margin-bottom: 50px;
    }
</style>